<template>
	<view class="wrapper">
		<view class="user_list">
			<view class="one_user">
				<dimg :src="userId | avatar" :mode="'aspectFit'" class="user_head"></dimg>
				<view class="frid_name">{{userinfo.friends.remarkName || userinfo.nickname }}</view>
			</view>
			<!-- <image src="../../static/chatFriend/yuanjia.png" mode="" class="yuanjia"></image> -->
		</view>
		<view class="rema_tag setFlex">
			<view class="set_bord">
				<view class="remark_box rt_box" @tap="changeAlert('请输入备注名', '', true)">
					<view class="remark">备注</view>
					<view class="remark_name same_col">
						{{ userinfo.friends.remarkName || '' }}
						<image src="../../static/user/right_arr.png" mode="aspectFit" class="right_arr"></image>
					</view>
				</view>
				<view class="tag_box rt_box last_bor" @tap="$open('../friend/friendLabel?userId=' + userId)">
					<view class="tag">标签</view>
					<view class="tag_name same_col">
						<text v-for="(val,index) in tagList" :key='index'>{{val.groupName}} <block v-if="index!=tagList.length-1"> ,</block></text>
						<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="zhuanzhang_rec space-bet" @tap="$open('./transferrecord')">
			转账记录
			<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
		</view> -->
		<!-- 		<view class="chat_rec space-bet" @tap="$open('./findtherecord')">
			查找聊天记录
			<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
		</view> -->
<!-- 		<view class="chat_fun setFlex">
			<view class="set_bord">
			<view class="read_del rt_box">
					<view class="del">阅后即焚</view>
					<switch @change="updateOfflineNoPushMsg" data-type="1" class="scale" :checked="userinfo.friends.isOpenSnapchat == 1" />
				</view>
				<view class="top_chat rt_box">
					<view class="top">置顶聊天</view>
					<switch @change="updateOfflineNoPushMsg" class="scale" data-type="2" :checked="userinfo.friends.openTopChatTime != 0" />
				</view>
				<view class="no_chat rt_box last_bor">
					<view class="no_chat ">消息免打扰</view>
					<switch @change="updateOfflineNoPushMsg" class="scale" data-type="0" :checked="userinfo.friends.offlineNoPushMsg == 1" />
				</view>
			</view>
		</view> -->
		<!-- 		<view class="space-bet">
			<view class="">消息过期自动销毁</view>
			<view class="c666">
				永久
				<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
			</view>
		</view>
<!-- 		<view class="chat_bac space-bet" @tap="$open('./chatback')">
			聊天背景
			<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
		</view> -->
		<view class="del_recd setFlex">
			<view class="set_bord">
				<view class="recd_del rt_box last_bor" @tap="changeAlert('清空聊天记录', '确定清除与该人的聊天记录？')">
					<view class="empty_own">清空聊天记录</view>
					<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
				</view>
				<!-- 				<view class="all_empty rt_box last_bor">
					<view class="empty_all">清空双方的聊天记录</view>
					<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
				</view> -->
			</view>
		</view>
		<alert :alertTitle="alertTitle" :alertText="alertText" :showInput="showInput" v-if="alertTitle != ''" @alertConfirm="alertConfirm"></alert>
	</view>
</template>

<script>
import alert from '../../components/alert/alert.vue';
export default {
	data() {
		return {
			alertTitle: '',
			alertText: '',
			showInput: false,
			userId: '',
			userinfo: '',
			tagList:[]
		};
	},
	onLoad(e) {
		this.userId = e.userId;
	},
	onShow() {
		this.userGet();
		this.friendGroupList()
	},
	components: { alert },
	methods: {
		// 清空聊天记录
		tigaseEmptyMyMsg() {
			this.$ajax(this.apiList.tigaseEmptyMyMsg, {
				userId: this.userId,
				type: 0
			}).then(res => {
				this.$sToast('清空成功');
			});
		},
		// 查询标签
		friendGroupList() {
			this.$ajax(this.apiList.friendGroupList).then(res => {
				res.data=res.data.filter(item => {
					item.userIdList=item.userIdList.filter(val => {
						return val==this.userId
					})
					return item.userIdList.length>0
				})
				this.tagList = res.data;
			});
		},
		// 查询用户信息
		userGet() {
			this.$ajax(this.apiList.userGet, {
				userId: this.userId
			}).then(res => {
				this.userinfo = res.data;
			});
		},
		// 切换弹出层
		changeAlert(alertTitle, alertText, showInput) {
			this.alertText = alertText;
			this.alertTitle = alertTitle;
			this.showInput = showInput || false;
		},
		// 点击回调
		alertConfirm(type, text) {
			console.log(this.alertText)
			if (type == 1 && this.alertTitle == '请输入备注名') {
				this.friendsRemark(text);
			} else if (type == 1 && this.alertTitle == '清空聊天记录') {
				this.tigaseEmptyMyMsg();
			}
			this.alertTitle = '';
		},
		// 阅后即焚
		updateOfflineNoPushMsg(e) {
			if (e.detail.value == true && e.currentTarget.dataset.type == 1) {
				this.$sToast('专聊：当前状态为阅后即焚，对方阅读完您发送的消息后会立即销毁(支持文字、语音、图片、视频四种消息类型)', 5000);
			}
			this.$ajax(this.apiList.updateOfflineNoPushMsg, {
				offlineNoPushMsg: e.detail.value ? 1 : 0,
				type: e.currentTarget.dataset.type,
				toUserId: this.userId,
				userId: uni.getStorageSync('userinfo').userId
			}).then(res => {
				this.$sToast('设置成功');
				this.userGet();
			});
		},
		// 设置好友备注
		friendsRemark(remarkName) {
			this.$ajax(this.apiList.friendsRemark, {
				remarkName: remarkName,
				describe: '',
				toUserId: this.userId
			}).then(res => {
				this.$sToast('设置成功');
				this.userGet();
			});
		}
	}
};
</script>

<style>
.wrapper {
	background-color: #f2f3f5;
}
.user_list {
	height: 161rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid rgba(224, 224, 224, 1);
	border-top: 1px solid rgba(224, 224, 224, 1);
}
.one_user {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 24rpx 40rpx 24rpx 27rpx;
}
.frid_name {
	font: 24rpx/24rpx '';
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.user_head {
	width: 76rpx;
	height: 76rpx;
	border-radius: 50%;
	margin-bottom: 15rpx;
	overflow: hidden;
}
.yuanjia {
	width: 76rpx;
	height: 76rpx;
	border-radius: 50%;
	margin-top: 24rpx;
}
.right_arr {
	width: 12rpx;
	height: 24rpx;
	margin: 0 30rpx 0 20rpx;
}

.setFlex {
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 20rpx;
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	border-top: 1rpx solid rgba(224, 224, 224, 1);
}
.rt_box {
	width: 720rpx;
	height: 103rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
}
.last_bor {
	border: none;
}
.remark {
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.same_col {
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(2, 151, 254, 1);
}
.space-bet {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 104rpx;
	background: rgba(255, 255, 255, 1);
	padding-left: 30rpx;
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	border-top: 1rpx solid rgba(224, 224, 224, 1);
	margin-top: 20rpx;
}
.chat_fun {
	/* height: 313rpx; */
	background: rgba(255, 255, 255, 1);
}
.scale {
	transform: scale(0.8);
}
</style>
